<script setup>
import { reactive, ref, onMounted, watch, watchEffect } from "vue";
import { useRouter, useRoute } from 'vue-router';
import { notice_detail, zhengce_detail, jiedu_detail } from "@/api/zcgg";
import { formatDate } from "@/utils/time";
import { showLoadingToast, closeToast } from 'vant';



const route = useRoute(); // 获取当前路由实例
const params = ref(route.params); // 从路由参数中获取 ID
console.log(params);

defineOptions({
  name: "Detail"
});
// 获取公示公告详情 /api/zcgg/notice_detail
const detail = ref({}); // 存储列表数据
const fetchData_detail = async () => {
  try {
    detail.value = {}
    showLoadingToast({
      message: '加载中...',
      forbidClick: true,
    });
    let response = null;
    // 根据 params.type 判断请求不同的接口
    if (params.value?.type == 'notice') {
      response = await notice_detail({ id: params.value.id });
    }
    if (params.value?.type == 'zhengce') {
      response = await zhengce_detail({ id: params.value.id });
    }
    if (params.value?.type == 'jiedu') {
      response = await jiedu_detail({ id: params.value.id });
    }

    if (response.code != 1) {
      throw new Error('获取数据失败');
    }
    detail.value = response.data;
    closeToast()
  } catch (err) {
  } finally {
  }
};
// 监听路由参数变化
watch(
  () => route.params, // 监听路由中的 ID 参数
  (newParams) => {
    if (newParams.id) {
      params.value = newParams; // 更新 params 的值
      console.log('路由参数更新:', newParams);
      fetchData_detail()
    }
  },
  { immediate: true } // 立即执行一次，确保初始值正确
);


</script>
<template>
  <div style="background-color: #f7f8fa; padding-top: 20px; height: 100vh-120px;">
    <van-cell-group inset>
      <div v-if="detail.title">
        <div style="
        margin-top: 10px;
        text-align: center;
        font-size: 24px;
        font-weight: bold;">{{ detail.title }}</div>
        <div style="
        margin-top: 10px;
        text-align: center;
        color:#d9d9d9;
        font-size: 14px;">
          <span>{{ '发布时间：' + formatDate(detail.pubtime) }}</span>
          <span style="margin-left:20px">{{ '发布单位：' + detail.author }}</span>

        </div>
        <!-- <div style="
        text-align: center;
        font-size: 16px;">{{ detail.intro }}</div>
      <van-divider /> -->
        <van-divider />
        <div style="margin: 10px;" v-html="detail.content"></div>
      </div>
    </van-cell-group>
  </div>
</template>


<style scoped></style>
